import React from 'react';
import { Tabs, Spin } from 'antd';
import RulePane from './Pane';
import { observer } from "mobx-react";
import { WeaLocaleProvider } from 'ecCom';
import { ruleTypes } from '../../../../../constants/form';
import './Main.less';

const { TabPane } = Tabs;
const { FIELD, JUMP } = ruleTypes;
const { getLabel } = WeaLocaleProvider;

@observer
export default class FromRule extends React.Component {
  componentDidMount() {
    const { appid, store } = this.props;

    store.init(appid);
  }

  componentWillUnmount() {
    this.props.store.initState();
  }

  render() {
    const { type, hasInit, onTypeChange } = this.props.store;

    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@rizfhg`} spinning={!hasInit}>
        <div className='wea-edc-form-rule-wrapper'>
          <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@s28wvn`} 
            defaultActiveKey={FIELD}
            activeKey={type} 
            onChange={onTypeChange}
          >
            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@h5p0q4`} tab={getLabel(32827,'字段规则')} key={FIELD} >
              {hasInit && <RulePane ecId={`${this && this.props && this.props.ecId || ''}_RulePane@nws6fe`} key={type} {...this.props} />}
            </TabPane>
            <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@sbgoh0`} tab={getLabel(503916,'跳转规则')} key={JUMP} >
              {hasInit && <RulePane ecId={`${this && this.props && this.props.ecId || ''}_RulePane@4bokk9`} key={type} {...this.props} />}
            </TabPane>
          </Tabs>
        </div>
      </Spin>
    );
  }
};